<template>
  <div class="mainWrap">
    <Head :softName="companyName"></Head>
    <a-layout-content :style="{ padding: '8px 16px 0', height: 'calc(88vh )' }">
      <div class="contentWrap">
        <a-row :gutter="[0, 16]">
          <a-col :span="24" v-if="Array.isArray(oneArray)">
            <div class="oneWrap marginBottom">
              <!-- 第一行 -->
              <a-row class="height100" :gutter="[16, 0]">
                <a-col
                  class="height100"
                  :span="4"
                  v-for="(item, index) in oneArray"
                  :key="item.key"
                >
                  <ThirdBox
                    :title="item.title"
                    :index="index"
                    :icon="item.icon"
                    :num="item.num"
                    :unit="item.unit"
                  >
                  </ThirdBox>
                </a-col>
              </a-row>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="twoWrap">
              <!-- 第二行 -->
              <a-row class="height100" :gutter="[16, 0]">
                <a-col :span="8" class="height100" v-if="twoObj.getCompanyTeamCompleted">
                  <div class="twoRow height100 borderShaw backGradient">
                    <div class="head">
                      <SbuHead :title="twoObj.getCompanyTeamCompleted.title"></SbuHead>
                    </div>
                    <div class="echartsBox">
                      <Echarts
                        type="bar"
                        :dataList="twoObj.getCompanyTeamCompleted.data"
                        :setting="{ grid: { top: '18px' } }"
                      >
                      </Echarts>
                    </div>
                  </div>
                </a-col>
                <a-col
                  :span="4"
                  class="height100"
                  v-if="twoObj.getcompanyteammax || twoObj.getCompanyFlowMax"
                >
                  <div class="twoRow infoS height100 borderShaw backGradient">
                    <a-row class="height100">
                      <a-col :span="24" class="heads">
                        <SbuHead :title="twoObj.getcompanyteammax.title"></SbuHead>
                      </a-col>
                      <a-col :span="24">
                        <div
                          class="maxBox fontInfo"
                          v-if="
                            Array.isArray(twoObj.getcompanyteammax.data) &&
                            twoObj.getcompanyteammax.data.length == 1
                          "
                        >
                          {{ twoObj.getcompanyteammax.data[0].name }}({{
                            twoObj.getcompanyteammax.data[0].num
                          }})
                        </div>
                      </a-col>
                      <a-col :span="24" class="heads">
                        <SbuHead :title="twoObj.getCompanyFlowMax.title"></SbuHead>
                      </a-col>
                      <a-col
                        :span="24"
                        v-if="
                          Array.isArray(twoObj.getCompanyFlowMax.data) &&
                          twoObj.getCompanyFlowMax.data.length == 1
                        "
                      >
                        <div class="mounth fontInfo">
                          {{ twoObj.getCompanyFlowMax.data[0].name }}({{
                            twoObj.getCompanyFlowMax.data[0].num
                          }})
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </a-col>
                <a-col :span="4" class="height100">
                  <div class="twoRow height100 borderShaw backGradient">
                    <a-row class="height100" v-if="twoObj.getCompanyPersonMax">
                      <a-col :span="24" :data-json="JSON.stringify(twoObj.getCompanyPersonMax)">
                        <SbuHead :title="twoObj.getCompanyPersonMax.title"></SbuHead>
                      </a-col>
                      <a-col :span="24" style="height: calc(100% - 24px)">
                        <div
                          class="nameWrap fontInfo"
                          v-if="Array.isArray(twoObj.getCompanyPersonMax.data)"
                        >
                          <div
                            class="nameItem"
                            v-for="item in twoObj.getCompanyPersonMax.data"
                            :key="item.name"
                          >
                            <span>{{ item.name }}</span>
                            <span>({{ item.num }})</span>
                          </div>
                        </div>
                      </a-col>
                    </a-row>
                  </div>
                </a-col>
                <a-col :span="8" class="height100" v-if="twoObj.getCompanyFlowByDay">
                  <div class="twoRow height100 borderShaw backGradient">
                    <div class="head">
                      <SbuHead :title="twoObj.getCompanyFlowByDay.title"></SbuHead>
                    </div>
                    <div class="echartsBox">
                      <Echarts
                        type="category"
                        :dataList="twoObj.getCompanyFlowByDay.data"
                        :setting="{ grid: { top: '18px' } }"
                      >
                      </Echarts>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="fourWrap">
              <a-row class="height100" :gutter="[16, 0]">
                <a-col class="height100" :span="8">
                  <div class="fourRow height100 borderShaw backGradient">
                    <div class="head">
                      <SbuHead :title="getCompanyFlowexp.title"></SbuHead>
                    </div>
                    <div class="echartsBox">
                      <div class="lineWrap backGradient" ref="texpFlow">
                        <div
                          class="contentItem"
                          ref="texpFlow-height"
                          v-for="(item, index) in getCompanyFlowexp.data"
                          :key="item.id + '' + index"
                        >
                          <!-- 图标 -->
                          <div class="iconWrap">
                            <div class="icon"></div>
                          </div>
                          <div class="title">{{ item.name }}</div>
                          <div class="time">{{ item.num }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a-col>
                <a-col class="height100" :span="8">
                  <div class="fourRow height100 borderShaw backGradient">
                    <div class="head">
                      <SbuHead :title="fourObj.getCompanyFlow8Max.title"></SbuHead>
                    </div>
                    <div class="echartsBox">
                      <Echarts
                        type="bar"
                        :dataList="fourObj.getCompanyFlow8Max.data"
                        :setting="{ color: ['#DBEACF', '#649B3F'], grid: { top: '18px' } }"
                      >
                      </Echarts>
                    </div>
                  </div>
                </a-col>
                <a-col :span="8" class="height100" v-if="fourObj.getCompanyFlow8Min">
                  <div class="fourRow height100 borderShaw backGradient">
                    <div class="head">
                      <SbuHead :title="fourObj.getCompanyFlow8Min.title"></SbuHead>
                    </div>
                    <div class="echartsBox">
                      <Echarts
                        type="bar"
                        :dataList="fourObj.getCompanyFlow8Min.data"
                        :setting="{ color: ['#EFF3CB', '#69B6DA'], grid: { top: '18px' } }"
                      >
                      </Echarts>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-col>
          <!-- 最后一行 -->
          <a-col :span="24">
            <div class="fourWrap">
              <a-row class="height100" :gutter="[16, 0]">
                <a-col class="height100" :span="8">
                  <div
                    class="fourRow height100 borderShaw backGradient"
                    @click="handClick('getCompanyFlowHidden')"
                  >
                    <!-- <div class="head">
                                            <SbuHead :title="getCompanyFlowHidden.title"></SbuHead>
                                        </div> -->
                    <div class="tableBox">
                      <ZSTable
                        scroolHeight="24vh"
                        :data="getCompanyFlowHidden.data"
                        :isAutoPlay="true"
                        :onRefresh="getCompanyFlowHiddenData"
                        columnsName="getcompanyflowhidden"
                        :newRowData="getCompanyFlowHidden.newRowData"
                      ></ZSTable>
                    </div>
                  </div>
                </a-col>
                <a-col :span="8" class="height100">
                  <div class="fourRow height100 borderShaw backGradient" v-if="getCompany8Type">
                    <div class="head">
                      <SbuHead :title="getCompany8Type.title"></SbuHead>
                    </div>
                    <div class="itemBox">
                      <a-row :gutter="[0, 0]">
                        <a-col
                          :span="6"
                          v-for="(item, index) in getCompany8Type.data"
                          :key="item.name + '' + index"
                        >
                          <div class="boxItemWrap" :class="index > 3 ? 'mTop' : ''">
                            <BoxRight>
                              <div class="itemWrap">
                                <div class="itemLeft">
                                  <div class="itemLeftIcon" :class="`itemIcon${index}`"></div>
                                </div>
                                <div class="itemRight">
                                  <div class="numberWrap">
                                    <span class="number">
                                      {{ NumberFormatter(item.num) }}
                                    </span>
                                    <span style="font-size: 10.44px">次</span>
                                  </div>
                                  <div class="name">{{ item.name }}</div>
                                </div>
                              </div>
                            </BoxRight>
                          </div>
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </a-col>
                <a-col :span="8" class="height100" v-if="getCompanyRale">
                  <div
                    class="fourRow height100 borderShaw backGradient"
                    @click="handClick('getCompanyRale')"
                  >
                    <!-- <div class="head">
                                            <SbuHead :title="getCompanyRale.title"></SbuHead>
                                        </div> -->
                    <div class="tableBox">
                      <ZSTable
                        scroolHeight="20vh"
                        :data="getCompanyRale.data"
                        :isAutoPlay="true"
                        :onRefresh="getCompanyRaleData"
                        columnsName="getCompanyRale"
                        :newRowData="getCompanyRale.newRowData"
                      >
                      </ZSTable>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-layout-content>
  </div>
</template>
<script>
import Head from "@/components/ScreenCommon/Head";
import ThirdBox from "./components/Box.vue";
import SbuHead from "./components/SubHead.vue";
import Echarts from "./components/Echarts.vue";
import ZSTable from "@/components/ZSTable/ZSTable";
import BoxRight from "@/components/ZSBoxItem/BoxRight";

export default {
  name: "screenThird",

  components: {
    Head,
    ThirdBox,
    SbuHead,
    Echarts,
    ZSTable,
    BoxRight,
  },
  data() {
    return {
      // 当前公司名称
      companyName: "董矿公司",
      oneArray: [
        {
          name: "getcompanyflowforyear",
          title: "年累计作业数",
          num: 0,
          key: "1",
          icon: "icon-donghuozuoye",
          unit: "次",
        },
        {
          name: "getcompanyflowformonth",
          title: "当月作业数",
          num: 0,
          key: "2",
          icon: "icon-zhuzhuangtu",
          unit: "次",
        },
        {
          name: "getcompanymaxflow",
          title: "单日最高发起数",
          num: 0,
          key: "3",
          icon: "icon-shenji",
          unit: "次",
        },
        {
          name: "getcompanymonthhandle",
          title: "当月平均每人处理量",
          num: 0,
          key: "4",
          icon: "icon-liucheng",
          unit: "个",
        },
        {
          name: "getcompanyflowtype",
          title: "目前累计流程数 ",
          num: 0,
          key: "5",
          icon: "icon-yonghu",
          unit: "次",
        },
        {
          name: "getcompanysumflow",
          title: "目前累计作业数 ",
          num: 0,
          key: "6",
          icon: "icon-icon_caigoushuliang",
          unit: "次",
        },
      ],
      twoObj: {
        getCompanyTeamCompleted: {
          title: "各站队当月作业完成情况",
          data: [],
        },
        getCompanyFlowByDay: {
          title: "每日作业发起曲线",
          data: [],
        },
        getcompanyteammax: {
          title: "当月发起作业最多的站队",
          data: "",
        },
        getCompanyFlowMax: {
          title: "当月发起最多的流程",
          data: "",
        },
        getCompanyPersonMax: {
          title: "当月作业最多的人",
          data: [],
        },
      },
      // 高频、低频
      fourObj: {
        getCompanyFlow8Max: {
          title: "热频流程 TOP8",
          data: [],
        },
        getCompanyFlow8Min: {
          title: "低频流程 TOP8",
          data: [],
        },
      },
      // 异常流程
      getCompanyFlowexp: {
        data: [],
        title: "异常流程",
      },
      // 隐患排查治理
      getCompanyFlowHidden: {
        data: [],
        newRowData: {},
        title: "隐患排查治理",
      },
      //
      getCompany8Type: {
        data: [],
        title: "本年度典型风险作业数据分析",
      },
      // 风险管控
      getCompanyRale: {
        data: [],
        newRowData: {},
        title: "风险作业管控",
      },
      // 定时器
      setIntName1: null,
      setIntName2: null,
      setIntName3: null,
      setIntName4: null,
      setIntName5: null,
    };
  },
  methods: {
    handClick(type) {
      //
    },
    getData(type, aName, otherParams, finallyCallBack) {
      let params = {
        companyName: this.companyName,
        ...otherParams,
      };
      let urls = this[`$${aName.toLowerCase()}`];
      urls = urls.replace(/\s+/g, "");
      this.getAxios(urls, params)
        .then((res) => {
          if (res.code == 200) {
            let data = res.data;
            if (type == "one") {
              // 第一行数据
              let newOneArray = this.oneArray;
              if (Array.isArray(data) && data.length == 1) {
                newOneArray = newOneArray.map((val) => {
                  let obj = val;
                  if (val.name == aName) {
                    obj["num"] = data[0].num;
                  }
                  return obj;
                });
              } else if (["string", "number"].includes(typeof data)) {
                newOneArray = newOneArray.map((val) => {
                  let obj = val;
                  if (val.name == aName) {
                    obj["num"] = data;
                  }
                  return obj;
                });
              } else if (typeof data == "object") {
                newOneArray = newOneArray.map((val) => {
                  let obj = val;
                  if (val.name == aName) {
                    obj["num"] = data.num;
                  }
                  return obj;
                });
              }
              this.oneArray = newOneArray;
            } else if (type == "two") {
              // 第二行数据
              let oldTwoObj = this.twoObj;
              oldTwoObj[aName].data = data;
              this.twoObj = {
                ...this.twoObj,
                ...oldTwoObj,
              };
            } else if (type == "four") {
              this.fourObj[aName].data = data;
            } else if (["getCompanyFlowexp", "getCompany8Type"].includes(type)) {
              this[aName] = {
                ...this[aName],
                data: res.data,
              };
            } else if (["getCompanyFlowHidden", "getCompanyRale"].includes(type)) {
              if (otherParams && otherParams.newId) {
                if (Array.isArray(data) && data.length > 0) {
                  this[aName] = {
                    ...this[aName],
                    newRowData: data[0],
                  };
                }
              } else {
                this[aName] = {
                  ...this[aName],
                  data: res.data,
                };
              }
            }
          }
        })
        .finally(() => {
          if (typeof finallyCallBack == "function") {
            finallyCallBack();
          }
        });
    },
    getOneLine() {
      let arr = this.oneArray.map((val) => val.name);
      arr.filter((val) => {
        this.getData("one", val);
      });
    },
    // 第二行数据
    getTwoLine() {
      let arr = Object.keys(this.twoObj);
      arr.filter((val) => {
        this.getData("two", val);
      });
    },
    getFourLine() {
      let arr = Object.keys(this.fourObj);
      arr.filter((val) => {
        this.getData("four", val);
      });
    },
    NumberFormatter(s) {
      return Number(s).toLocaleString();
    },
    // 异常流程
    getCompanyFlowexpData() {
      this.getData("getCompanyFlowexp", "getCompanyFlowexp", {}, () => {
        this.setIntName1 = setInterval(() => {
          this.scroolTop("texpFlow", "setIntName1");
        }, 20000);
      });
    },
    // 隐患排查治理
    scroolTop(r, names) {
      // 获取当前滚动条的位置
      let refsEl = this.$refs[r];
      let elArr = this.$refs[`${r}-height`];
      if (elArr.length <= 0) {
        return;
      }
      let h = elArr[0].offsetHeight;
      if (r == "texpFlow") {
        h = (window.innerHeight / 100) * 4;
      } else if (r == "jituanRef") {
        h = (window.innerHeight / 100) * 3.5 + 5;
      }
      // 当前滚动条位置
      let nowPosition = refsEl.scrollTop;
      let toScroop = h;
      // 滚动条最大高度
      var maxScrollTop = refsEl.scrollHeight - refsEl.clientHeight;
      if (nowPosition == 0) {
      } else {
        // 向上取整
        let snum = Math.ceil(nowPosition / h);
        toScroop = (snum + 1) * h;
      }
      if (toScroop > maxScrollTop) {
        toScroop = 0;
      }
      if (refsEl) {
        refsEl.scrollTo({
          top: toScroop,
          behavior: "smooth",
        });
        if (toScroop == 0) {
          this.end(names);
          if (r == "texpFlow") {
            this.getCompanyFlowexpData();
          } else if (r == "jituanRef") {
            this.getflowforgroupday();
          }
        }
      }
    },
    end(names) {
      if (names) {
        clearTimeout(this[names]);
        this[names] = null;
      } else {
        clearTimeout(this.setIntName1);
        this.setIntName1 = null;
        this.setIntName2 = null;
        this.setIntName3 = null;
        this.setIntName4 = null;
        this.setIntName5 = null;
      }
    },
    // 隐患排查治理
    getCompanyFlowHiddenData(aParams) {
      let backF = () => {
        this.setIntName4 = setInterval(() => {
          let aParams = {};
          let dataList = this.getCompanyFlowHidden.data;
          if (Array.isArray(dataList) && dataList.length > 0) {
            aParams["newId"] = dataList[0].id;
          }
          this.getData("getCompanyFlowHidden", "getCompanyFlowHidden", aParams);
        }, 4000);
      };
      this.getData("getCompanyFlowHidden", "getCompanyFlowHidden", aParams, backF);
      this.end("setIntName4");
    },
    // 风险作业数据分析
    getCompany8TypeData() {
      this.getData("getCompany8Type", "getCompany8Type");
    },
    // 风险管控
    getCompanyRaleData(aParams) {
      let backF = () => {
        this.setIntName5 = setInterval(() => {
          let aParams = {};
          let dataList = this.getCompanyRale.data;
          if (Array.isArray(dataList) && dataList.length > 0) {
            aParams["newId"] = dataList[0].id;
          }
          this.getData("getCompanyRale", "getCompanyRale", aParams);
        }, 4000);
      };
      this.getData("getCompanyRale", "getCompanyRale", aParams, backF);
      this.end("setIntName5");
    },
    // 定时获取
    startInner() {
      this.setIntName2 = setInterval(() => {
        // 第一行数据
        this.getOneLine();
      }, 10000);
      this.setIntName3 = setInterval(() => {
        this.getTwoLine();
        this.getFourLine();
        this.getCompany8TypeData();
      }, 1800000);
    },
  },
  mounted() {
    // 第一行数据
    this.getOneLine();
    // 第二行数据
    this.getTwoLine();
    // 第四行数据
    this.getFourLine();
    //
    // 异常流程
    this.getCompanyFlowexpData();
    // 隐患排查治理
    this.getCompanyFlowHiddenData();
    // 风险作业数据分析
    this.getCompany8TypeData();
    // 风险管控
    this.getCompanyRaleData();
    this.startInner();
  },
  destroyed() {
    this.end();
  },
};
</script>
<style lang="less" scoped>
.mainWrap {
  width: 100vw;
  height: 100vh;
  background-image: url(~@/assets/images/screen/mainBack.png);
  background-color: rgba(10, 20, 39, 0.95);
  overflow: hidden;

  // 内容
  .contentWrap {
    .head {
      margin-bottom: 4px;
    }

    .oneWrap {
      height: 14vh;
    }

    .twoWrap {
      height: 21vh;

      .twoRow {
        height: 100%;

        .heads {
          position: sticky;
          top: 0px;
        }

        // 当月发起流程最多的站队
        .maxBox {
          height: 34px;
          margin: 8px;
          padding: 8px 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        // 当月发起作业做多的流程
        .mounth {
          height: 50px;
          margin: 8px;
          padding: 8px 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        // 当月处理作业流程最多人员
        .nameWrap {
          // height: calc(100% - 30px - 12px);
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          overflow-y: auto;
          padding-top: 8px;

          .nameItem {
            margin-bottom: 8px;
          }
        }
      }

      .infoS {
        overflow-y: auto;
      }
    }

    .threeWrap {
      height: 23vh;
    }

    .fourWrap {
      height: 23vh;
    }

    .echartsBox {
      height: calc(100% - 30px);
    }

    .tableBox {
      // height: calc(100% - 24px);
      height: calc(100%);
    }
  }

  .height100 {
    height: 100%;
  }

  .borderShaw {
    padding: 8px 12px 12px 12px;
    border: 1px solid #b5b6b6;
    border-radius: 8px;
    box-shadow: 0px 0px 8px 1px #99999980;
  }

  .fontInfo {
    font-size: 14px;
    font-weight: 700;
    background-color: #16385488;
    color: #cdcdcd;
  }
}

// 背景渐变
.backGradient {
  background: linear-gradient(to top, rgba(32, 63, 125, 0.7), rgba(32, 63, 125, 0));
}

// 底部中间
.boxItemWrap {
  height: calc(8.5vh);
  margin: 0.5vh 4px 0.5vh 4px;

  .itemWrap {
    display: flex;
    height: 100%;
    width: 100%;

    .itemLeft {
      flex-shrink: 2;
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .itemLeftIcon {
        width: 50px;
        height: 50px;
        background-size: 100% 100%;
      }

      .itemIcon0 {
        background-image: url(~@/assets/images/screen/icon/iconFir.png);
      }

      .itemIcon1 {
        background-image: url(~@/assets/images/screen/icon/iconSet.png);
      }

      .itemIcon2 {
        background-image: url(~@/assets/images/screen/icon/iconDiao.png);
      }

      .itemIcon3 {
        background-image: url(~@/assets/images/screen/icon/iconBox.png);
      }

      .itemIcon4 {
        background-image: url(~@/assets/images/screen/icon/iconShip.png);
      }

      .itemIcon5 {
        background-image: url(~@/assets/images/screen/icon/iconLower.png);
      }

      .itemIcon6 {
        background-image: url(~@/assets/images/screen/icon/iconAddress.png);
      }

      .itemIcon7 {
        background-image: url(~@/assets/images/screen/icon/iconOther.png);
      }

      // '动火作业': '~@/assets/images/screen/icon/iconFir.png',
      // '检维修作业': '~@/assets/images/screen/icon/iconSet.png',
      // '吊装作业': '~@/assets/images/screen/icon/iconDiao.png',
      // '有限空间': '~@/assets/images/screen/icon/iconBox.png',
      // '船只靠离泊': '~@/assets/images/screen/icon/iconShip.png',
      // '下舱作业': '~@/assets/images/screen/icon/iconLower.png',
      // '巡检巡查': '~@/assets/images/screen/icon/iconAddress.png',
      // '其他作业': '~@/assets/images/screen/icon/iconOther.png'

      @keyframes rotate {
        from {
          transform: rotateY(0deg);
        }

        to {
          transform: rotateY(360deg);
        }
      }
    }

    .itemRight {
      flex-shrink: 1.5;
      width: 100%;
      display: flex;
      flex-direction: column;
      color: #ffffff;
      align-items: start;
      justify-content: center;

      .numberWrap {
        margin-bottom: 4px;

        .number {
          font-size: 18.88px;
          font-weight: 700px;
          color: rgba(0, 224, 255, 1);
          margin-right: 4px;
        }
      }

      .name {
        font-size: 15px;
        font-weight: 700;
      }

      .title {
        font-size: 10.7px;
        color: rgba(0, 224, 255, 1);
      }
    }
  }
}

// 异常流程
.lineWrap {
  height: calc(16vh);
  overflow-y: auto;
  // margin-top: 0.5vh;

  .contentItem {
    display: flex;
    height: 4vh;
    justify-content: center;
    align-items: center;
    padding: 2px 0px;
    color: rgba(248, 200, 111, 1);

    .iconWrap {
      width: 3vw;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon {
        width: 1.25vw;
        height: 1.25vw;

        background-image: url(~@/assets/images/screen/icon/jinggao.png);
        background-size: 100% 100%;
      }
    }

    .name {
      margin: 0px 4px;
      width: 60px;
    }

    .title {
      width: calc(100% - 6vw - 14px);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      max-height: 3em;
      /* 高度为行高的2倍 */
      line-height: 1.5em;
      text-overflow: ellipsis;
      font-size: 13px;
      padding-right: 20px;
    }

    .time {
      font-size: 12px;
    }

    @media screen and (max-width: 1650px) {
      .title {
        font-size: 12px;
      }
    }

    .options {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 64px;

      .optionBtn {
        margin: 0px;
        color: rgba(0, 240, 255, 1);
        border-color: rgba(0, 56, 255, 0.5);
      }

      .optionBtn:hover {
        border-color: rgba(0, 56, 255, 1);
      }

      .gradient-border-button {
        color: rgba(0, 240, 255, 1);
        border: none;
        background-image: linear-gradient(to right, #ffc107, #ff5722);
        background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: background-position 0.5s ease;
      }

      .gradient-border-button:hover {
        background-position: right center;
      }
    }
  }
}

// 底部8种类型
.itemBox {
  ::v-deep(.boxItemWrap) {
    height: 8vh;
  }
}
</style>
